import Api from '@/services/ant-design-pro/index';
import { useEffect, useState } from 'react';
import MyComment from './componnents/MyComment';
import OtherComponent from './componnents/OtherComment';
import style from './index.less';

const articleID = 78;

interface IUser {
  avatar: string;
  id: string | number;
  age: number;
  name: string;
  gender: string;
}

export type TCommentItem = Pick<IUser, 'avatar' | 'name'> & {
  userID: string | number;
  comment: string;
  created: Date;
  articleID: number;
  upStar: number;
  downStar: number;
  commentID: string;
  reply: boolean;
  children: TCommentItem[];
};
function Comment() {
  const [user, setUser] = useState<IUser>({
    avatar: '',
    id: '',
    age: 0,
    name: '',
    gender: '',
  });
  const [commentList, setCommentList] = useState<TCommentItem[]>([]);

  const getComment = (id?: number) => {
    Api.Exercise03.getComment(id).then((res: any) => {
      if (res.status === 200) {
        // console.log(res.data, 'res.data');
        commentList.forEach((item) => {
          item.reply = false;
        });
        setCommentList(res.data);
      }
    });
  };
  // 获取用户信息
  useEffect(() => {
    Api.Exercise03.getUserInfo(0).then((res: any) => {
      if (res.status === 200) {
        setUser({
          ...user,
          ...res.data,
        });
      }
    });
    getComment();
  }, []);

  const onReply = (item: TCommentItem) => {
    item.reply = !item.reply;
    console.log(commentList, 'commentList');
    setCommentList([...commentList]);
  };
  return (
    <div className={style.commentWrapper}>
      <h2>这是Comment组件</h2>
      <div className={style.container}>
        <MyComment
          avatar={user.avatar}
          id={user.id}
          articleID={articleID}
          getComment={getComment}
        />

        <div className={style.allComment}>
          {commentList.length &&
            commentList.map((item) => (
              <OtherComponent
                id={user.id}
                articleID={articleID}
                item={item}
                onReply={onReply}
                avatar={user.avatar}
                key={item.commentID}
                getComment={getComment}
                ifChild={false}
              ></OtherComponent>
            ))}
        </div>
      </div>
    </div>
  );
}

export default Comment;
